<template>
    <div class="d-flex flex-column align-items-center mb-2">
        <el-card v-for="item in data.cardList" :key="item.id" class="box-card mt-4 mb-4">
            <template #header>
                <div class="card-heaer d-flex justify-content-between">
                    <span class="title" @click="gotoPath(item)">{{ item.name }}</span>
                    <Status :status="item.status"/>
                </div>
            </template>
            <el-row :gutter="20">
                <el-col :span="6"><el-text class="mx-1" type="info">项目编码</el-text></el-col>
                <el-col :span="6" class="text-center"><el-text class="mx-1" type="info">当前步骤</el-text></el-col>
                <el-col :span="6" class="text-center"><el-text class="mx-1" type="info">创建时间</el-text></el-col>
                <el-col :span="6" class="text-end"><el-text class="mx-1" type="info">创建人</el-text></el-col>
                <el-col :span="6" class="pt-4">{{item.code}}</el-col>
                <el-col :span="6" class="text-center pt-4"><ProjectStep :step="item.step"/></el-col>
                <el-col :span="6" class="text-center pt-4">{{item.createdTime}}</el-col>
                <el-col :span="6" class="text-end pt-4">{{item.createdBy}}</el-col>
            </el-row>
        </el-card>
    </div>
    <div class="container d-flex justify-content-end mb-5">
        <Pagination 
            :total="data.totalNumber"
            :pageSize="5"
            @handleCurrentChange="handleCurrentChange"
            @handleSizeChange="handleSizeChange"
        />
    </div>
</template>
<script lang="ts" setup>
    import { reactive, onMounted } from 'vue'
    import { useRouter } from "vue-router";
    import Status from '@/components/Status.vue'
    import ProjectStep from '@/components/project/ProjectStep.vue'
    import Pagination from '@/components/Pagination.vue'
    import { List } from "@/api/due/historyProject.js"
    import moment from 'moment'

    const router = useRouter();
    const data = reactive({
       cardList: [],
       totalNumber: 0
    })
    /**
     * 初始化方法
     */
    onMounted(() =>{
        queryList(1, 5)
    })
    /**
     * 分页处理
     */
    const handleCurrentChange = (currentPage, pageSize) => {
        queryList(currentPage, pageSize)
    }
    /**
     * 每页数量变化时处理
     */
    const handleSizeChange = (currentPage, pageSize) => {
        queryList(currentPage, pageSize)
    }
    /**
     * 项目列表查询
     */
    const queryList = (currentPage, pageSize) => {
        List(currentPage, pageSize)
            .then((response) => {
                response.data.records.forEach(element => {
                    element.createdTime = moment(element.createdTime).format('YYYY-MM-DD HH:mm:ss')
                    element.updatedTime = moment(element.updatedTime).format('YYYY-MM-DD')
                });
                data.cardList = response.data.records
                data.totalNumber = response.data.total
            })
            .catch((error) => { });
    }
    /**
     * 跳转路径
     */
    const gotoPath = (item) => {
        let path = getPath(item.step)
        path = path + '?projectCode=' + item.code
        router.push(path)
    }
    /**
     * 计算属性，计算要跳转步骤的路径
     */
    const getPath = (step) => {
        switch (step) {
            case "EXCEL_UPLOAD":
                return "/bi_frontend/addProject/upload";
            case "RESULT_CHECK":
                return "/bi_frontend/addProject/resultCheck";
            case "RESULT_QUERY":
                return "/bi_frontend/addProject/resultQuery";
            case "RESULT_UPDATE":
                return "/bi_frontend/addProject/resultUpdate";
            case "REPORT_UPDATE":
                return "/bi_frontend/addProject/reportUPdate";
            case "PROJECT_COMPLETED":
                return "/bi_frontend/addProject/taskSummary";
            default:
                return "/bi_frontend/project/history";
        }
    }
</script>
<style>
    .el-card {
        width: 67%;
    }

    .el-card__header {
        border-bottom: none !important;
    }

    .title:hover {
        cursor: pointer;
        color: #337ecc;
    }
    .title {
        font-size: 20px;
        font-weight:600;
    }
</style>